<template>
  <div class="content">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="广告名称">
        <el-input v-model="formInline.title" placeholder="请输入广告名称" clearable />
      </el-form-item>
      <el-form-item label="广告位置">
        <dictCode v-model="formInline.position" dict="banner_advertise_position"></dictCode>
      </el-form-item>
      <el-form-item label="到期时间">
        <DatePicker v-model="formInline.endTime" type="datetime"></DatePicker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查找</el-button>
        <el-button type="primary" @click="dialogVisible=true" plain>新增</el-button>
        <el-button type="danger" @click="delFn" plain :disabled="delParams.ids.length==0">批量删除</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableParams.records" @selection-change="handleSelectionChange" border stripe>
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" />
      <el-table-column prop="title" label="广告名称" align="center" />
      <el-table-column prop="positionName" label="广告位置" align="center" />
      <el-table-column label="广告时间" align="center" min-width="350">
        <template #default="scope">
          {{scope.row.startTime}} ~ {{scope.row.endTime}}
        </template>
      </el-table-column>
      <el-table-column label="广告图片" align="center" min-width="150">
        <template #default="scope">
          <uploadImage v-model="scope.row.bannerImage" readonly="1"></uploadImage>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="链接地址" align="center" min-width="250" />
      <el-table-column prop="bannerSort" label="排序" align="center" />
      <el-table-column label="类型" align="center">
        <template #default="scope">
          {{scope.row.type==0?'内链':"外链"}}
        </template>
      </el-table-column>
      <el-table-column label="上线/下线" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.enableStatus==1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="170" align="center">
        <template #default="scope">
          {{$utils.dateTimeFormateFn(scope.row.gmtCreateLong*1000,"all")}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" min-width="200">
        <template #default="scope">
          <el-button type="primary" text @click="handleClick(scope.row,1)" icon="Edit">编辑</el-button>
          <el-button type="primary" text @click="handleClick(scope.row,2)" icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="新增/编辑广告" width="700" :before-close="handleClose">
      <el-form label-width="100" :model="form" :rules="rules" ref="formEl">
        <el-form-item label="广告名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入广告名称" clearable />
        </el-form-item>
        <el-form-item label="广告位置" prop="position">
          <dictCode v-model="form.position" dict="banner_advertise_position"></dictCode>
        </el-form-item>
        <el-form-item prop="startTime" label="时间">
          <datePickerRange v-model:start="form.startTime" v-model:end="form.endTime" type="datetimerange"></datePickerRange>
        </el-form-item>
        <el-form-item label="排序" prop="title">
          <el-input-number v-model="form.bannerSort" :min="0" />
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-switch v-model="form.enableStatus" :active-value="1" :inactive-value="2" />
        </el-form-item>
        <el-form-item label="图片" prop="bannerImage">
          <uploadImage v-model="form.bannerImage"></uploadImage>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">内链</el-radio>
            <el-radio :label="1">外链</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告链接" prop="url">
          <el-input v-model="form.url" placeholder="请输入广告链接" clearable />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.content" placeholder="请输入备注" type="textarea" :autosize="{ minRows : 4 }" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();
let formInline = ref({
  title: "",
  startTime: "",
  endTime: "",
  position: "",
  pageNum: 1,
  pageSize: 10,
});
let loading = ref(false);
let tableParams = ref({});
let dialogVisible = ref(false);
let delParams = ref({
  ids: [],
});
let form = ref({
  title: "",
  startTime: "",
  endTime: "",
  position: "",
  url: "",
  bannerImage: "",
  content: "",
  enableStatus: 1,
  bannerSort: 0,
  type: 0,
});
const rules = reactive<FormRules<RuleForm>>({
  title: [{ required: true, message: "请输入广告标题", trigger: "blur" }],
  position: [{ required: true, message: "请选择广告位置", trigger: "blur" }],
  bannerImage: [{ required: true, message: "请选择广告图片", trigger: "blur" }],
  startTime: [{ required: true, message: "请选择广告时间", trigger: "blur" }],
  url: [{ required: true, message: "请选择广告链接", trigger: "blur" }],
});

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let init = () => {
  formInline.value = {
    title: "",
    startTime: "",
    endTime: "",
    position: "",
    pageNum: 1,
    pageSize: 10,
  };
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.bannerList(formInline.value);
  delParams.value.ids = [];
};
let handleSelectionChange = (e) => {
  let ids = [];
  e.forEach((element) => {
    ids.push(element.id);
  });
  delParams.value.ids = [...ids];
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!proxy.$refs.formEl) return;
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      console.log("error submit!", fields);
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    if (form.value.id) {
      await proxy.$apis.bannerUpdate(form.value);
    } else {
      await proxy.$apis.bannerAdd(form.value);
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

let handleClose = () => {
  form.value = {
    title: "",
    startTime: "",
    endTime: "",
    position: "",
    url: "",
    bannerImage: "",
    content: "",
    enableStatus: 1,
    bannerSort: 0,
    type: 0,
  };
  proxy.$refs.formEl.resetFields();
  getInfo();
  dialogVisible.value = false;
};

let handleClick = async (row, num: Number) => {
  switch (num) {
    case 1:
      let resp = await proxy.$apis.bannerDetail({ id: row.id });
      form.value = proxy.$utils.formatFunction(resp, { ...form.value });
      form.value.id = row.id;
      dialogVisible.value = true;
      break;
    case 2:
      delParams.value.ids = [row.id];
      delFn();
      break;
    default:
      break;
  }
};
let delFn = async () => {
  let resp = await proxy.$utils.confirmTips("是否确定删除?");
  if (!resp) return;
  await proxy.$apis.bannerDel(delParams.value);
  proxy.$utils.showToast("删除成功");
  getInfo();
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
